<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"content="IE=egde">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css\login.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>登录</title>
</head>
<body>
    <div class="box">
        <div class="pre-box">
            <h1>WELCOME</h1>
            <P>JOIN US!</P>
            <div class="img-box">
                <img src="./img/kk.jpg" alt="">
            </div>
        </div>
    <div class="reginster-form">
        <div class="title-box">
            <h1>登录</h1>
        </div>
        <div class="input-box">
            <input type="text"placeholder="用户名">
            <input type="text"placeholder="密码">
        </div>
        <div class="btn-box">
            <a href="index.html"><button>登录</button></a>
            <p onclick="mySwitch()">没有账号?去注册</p>
        </div>
    </div>
     <div class="login-form">
        <div class="title-box">
            <h1>注册</h1>
        </div>
        <div class="input-box">
            <input type="text"placeholder="用户名">
            <input type="password"placeholder="密码">
            <input type="password"placeholder="确认密码">
        </div>
        <div class="btn-box">
           <button>注册</button>
            <p onclick="mySwitch()">已有账号?去登录</p>
        </div>
    </div> 
    </div>
    <script>
        // 滑动的状态
         let flag=true
         const mySwitch=()=>{
            if(flag){
                // 获取到滑动盒子的dom元素并修改它移动的位置
                $(".pre-box").css("transform","translateX(100%)")
                // 获取到滑动盒子的dom元素并修改它的背景颜色
                $(".pre-box").css("background-color","#a6c9ee")
                //修改图片的路径
                $("img").attr("src","./img/R-C.jpg")
            }
            else {
                $(".pre-box").css("transform","translateX(0%)")
                $(".pre-box").css("background-color","rgb(253, 163, 163)")
                $("img").attr("src","./img/KK.jpg")
            }
            flag=!flag
         }
   </script>
</body>
</html>